<template>
  <div>
    <div style="text-align: center">
      <el-button v-if="status == 0" type="primary" style="display: inline-block;width: 80%;margin-left: 28px"
                 @click="dialogFormVisible = true" round>提交证据
      </el-button>
    </div>
    <div>
      <el-dialog v-bind="$attrs" v-on="$listeners" @close="onClose"
                 :visible.sync="dialogFormVisible" title="提交证据">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                 label-position="top">
          <el-form-item label="留言" prop="evidence_font">
            <el-input v-model="formData.evidence_font" type="textarea" placeholder="请输入留言"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="上传凭证" prop="evidence_img">
            <el-upload
              ref="evidence_img"
              :file-list="evidence_imgfileList"
              :action="evidence_imgAction"
              multiple
              :before-upload="evidence_imgBeforeUpload"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              list-type="picture-card">
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";

const connect=axios.create({
  // baseURL:"http://192.168.55.74:8081"
  baseURL:"http://10.22.112.205:8081"
})
export default {
  name: 'submitEvidence',
  inheritAttrs: false,
  components: {},
  props: ['status'],
  data() {
    return {
      dialogFormVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      imgPathArr: [],
      formData: {
        tribunal_id: parseInt(this.$route.query.tribunal_id),
        evidence_font: '',
        evidence_img: '',
        status: 0 //0 表示买家 1表示卖家
      },
      rules: {
        evidence_font: [{
          required: true,
          message: '请输入留言',
          trigger: 'blur'
        }],
      },
      evidence_imgAction: '/upload/uploadImg',
      evidence_imgfileList: [],
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.dialogFormVisible = false
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.getImgStr()
        // let res = connect.post('/evidence/addEvidenceByTribunalId', {
        connect.post('/evidence/addEvidenceByTribunalId', {
            ...this.formData
        }).then((res)=> {
          if (res.data.status == 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
            });
            this.close()
            //刷新
            location.reload()
          } else {
            this.$message.error(res.data.msg || '提交失败');
          }
        })

      })
    },
    evidence_imgBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    handleSuccess(file, fileList) {
      if (file.status === 200) {
        this.evidence_imgfileList.push(fileList)
      } else {
        //错误
      }
    },
    handleRemove(file, fileList) {
      this.evidence_imgfileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getImgStr() {
      if (this.evidence_imgfileList) {
        this.imgPathArr = []
        this.evidence_imgfileList.forEach((item) => {
          this.imgPathArr.push(item.response.data)
        })
        this.formData.evidence_img = this.imgPathArr.join(",")
      }
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
